<template>
  <div>
    <div class="xw-block" style="position: relative">
      <h3>{{ detail.title }}</h3>
      <div>
        <p style="color: #8a919f;font-size: 13px;">
          <i class="el-icon-s-custom"></i>
          <span style="margin-left: 5px">{{detail.sendUserName}}</span>
          <span style="margin-left: 10px">{{detail.sendTime | dateFormatHms}}</span>
          <el-tag style="margin-left: 10px" type="mini">{{detail.type}}</el-tag>
        </p>
      </div>
    </div>

    <div class="xw-block">
      <h4><i class="el-icon-monitor"></i><span style="margin-left: 10px">帖子内容</span></h4>
      <Tinymce v-model="detail.content" displayMode></Tinymce>
      <div v-if="detail.menuImages && detail.menuImages.length > 0">
        <el-image
            v-for="item in detail.menuImages"
            :key="item"
            style="width: 100px;height: 100px;margin-right: 10px;border-radius: 5px"
            :src="item"
            :preview-src-list="[item]"
            fit="cover">
        </el-image>
      </div>
    </div>

    <div class="xw-block" :key="brushKey">
      <h4><i class="el-icon-monitor"></i><span style="margin-left: 10px">评论详情</span></h4>
      <CommentList v-if="detail.id" ref="CommentList" :postCodeId="detail.id"></CommentList>
    </div>
  </div>
</template>
<script>
import CommentList from "@/components/CommentList.vue";
import CommentOp from "@/components/CommentOp.vue";
import Tinymce from "@/components/Tinymce.vue";
export default {
  data() {
    return {
      brushKey: 0,
      // 评论发送信息
      selectCommentRow: {},
      commentVisible: false,
      detail: '',
      id: '',
      commentData: [],
      // 帖子的关联内容
    }
  },
  mounted() {
    this.id = this.$route.query.id
    this.load()
  },
  components: {Tinymce,CommentList,CommentOp },
  methods: {
    // 子组件触发刷新列表
    brush() {
      this.brushKey++
      this.load()
    },
    load() {
      this.request.get("/postCode/" + this.id).then(res => {
        if (res.code === '200') {
          this.detail = res.data
        }
      })
    },

  }
}
</script>